<template>
  <div class="app-container">
    <sticky class="filter-container">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-input
            v-model="listSearch.search"
            placeholder="搜索"
            style="margin-right: 10px;width: 200px"
            class="filter-item"
            size="mini"
            clearable
            @keyup.enter.native="handleSearch"
            @clear="handleSearch"
            @blur="handleSearch"
          />
          <el-button
            v-waves
            class="filter-item"
            size="mini"
            type="primary"
            icon="el-icon-search"
            @click="handleSearch"
          >
            搜索
          </el-button>
          <el-button
            v-waves
            class="filter-item"
            size="mini"
            type="primary"
            icon="el-icon-refresh-right"
            :loading="refreshLoading"
            @click="refresh"
          />
        </el-col>
        <el-col :span="8" style="text-align: right">
          <el-dropdown v-if="checkPermission(['admin', 'mobile_all', 'mobile_import'])" trigger="click">
            <el-button
              v-waves
              :loading="downLoading"
              class="filter-item"
              size="mini"
              type="primary"
              icon="el-icon-upload2"
              style="margin-right: 10px;"
            >
              导入
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="handleDownloadTemplateFile">下载模板</el-dropdown-item>
              <el-dropdown-item>
                <el-upload action="" :show-file-list="false" :http-request="handleUploadDataFile">导入数据</el-upload>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown v-if="checkPermission(['admin', 'mobile_all', 'mobile_export'])" trigger="click">
            <el-button
              v-waves
              :loading="downLoading"
              class="filter-item"
              size="mini"
              type="primary"
              icon="el-icon-download"
              style="margin-right: 10px;"
            >
              导出
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="handleDownloadCurrent">导出当前</el-dropdown-item>
              <el-dropdown-item @click.native="handleDownloadAll">导出所有</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button
            v-if="checkPermission(['admin','mobile_all', 'mobile_create'])"
            v-waves
            class="filter-item"
            size="mini"
            type="primary"
            icon="el-icon-plus"
            @click="showAdd"
          >
            新增
          </el-button>
        </el-col>
      </el-row>
    </sticky>
    <el-table
      :data="list"
      stripe
      style="width: 100%"
    >
      <el-table-column
        prop="sn"
        label="sn号"
      />
      <el-table-column
        prop="name"
        label="设备号"
      />
      <el-table-column
        prop="port"
        label="端口"
      />
      <el-table-column
        prop="wechat_name"
        label="微信号"
      />
      <el-table-column
        prop="status"
        label="状态"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-text="激活"
            inactive-text="锁定"
            @change="handleStatus(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="80px"
        align="center"
      >
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="编辑" placement="top">
            <el-button
              v-if="checkPermission(['admin','mobile_all','mobile_edit'])"
              type="text"
              icon="el-icon-edit"
              @click="showEdit(scope.row.id)"
            />
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <el-button
              v-if="checkPermission(['admin','mobile_all','mobile_delete'])"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      style="text-align: right; margin-top: 20px"
      background
      :hide-on-single-page="true"
      :current-page="listSearch.page"
      :page-size="listSearch.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="listSearch.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 弹框组件 -->
    <vForm :vdialog="dialog" :vtitle="title" :visedit="isedit" :vformid="formid" @changeShow="showUpdate" />
  </div>
</template>

<script>
// 按钮吸顶
import Sticky from '@/components/Sticky/index'
// 按钮水波效果
import waves from '@/directive/waves/waves'
import checkPermission from '@/utils/permission'
import vForm from './components/form'
import { listMobile, DownloadTemplateFileMobile, UploadDataFileMobile, exportMobileCurrent, exportMobileAll, delMobile, statusMobile } from '@/api/mobile'
export default {
  components: { vForm, Sticky },
  directives: { waves },
  data() {
    return {
      url_api: process.env.VUE_APP_BASE_API,
      refreshLoading: false,
      downLoading: false,
      listLoading: true,
      list: [],
      listSearch: {
        total: 0,
        page: 1,
        pageSize: 10,
        is_active: '',
        search: ''
      },
      // 弹出框定义属性
      // （与子组件的 props 属性一致）dialog 控制新增、编辑、查看弹窗的显示与隐藏
      dialog: false,
      title: '',
      isedit: '',
      formid: 0
      // 弹出框定义属性
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // checkPermission 权限检查
    checkPermission,
    // 点击按钮事件，显示弹窗组件
    showAdd() {
      this.dialog = true
      this.title = '新增模拟器'
      this.isedit = 'add'
    },
    showEdit(row) {
      this.dialog = true
      this.title = '编辑模拟器'
      this.isedit = 'edit'
      this.formid = row
    },
    // 监听 子组件弹窗关闭后触发，由子组件调用
    showUpdate(val, valid) {
      if (val === 'false') {
        this.dialog = false
        this.formid = valid
      } else {
        this.dialog = true
      }
    },
    // 弹出框
    // 搜索
    handleSearch() {
      // 当页面不在第一页时搜索内容报错
      this.listSearch.page = 1
      this.getList()
    },
    // 搜索
    // 列表
    getList() {
      this.listLoading = true
      listMobile(this.listSearch).then(res => {
        this.list = res.data
        this.listSearch.total = res.count
        this.listLoading = false
      })
    },
    // 列表
    // 分页
    handleSizeChange(val) {
      this.listSearch.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listSearch.page = val
      this.getList()
    },
    // 分页
    // 刷新
    refresh() {
      this.refreshLoading = true
      this.getList()
      this.refreshLoading = false
      this.$notify.info({
        type: 'info',
        title: '提示',
        message: '已刷新',
        showClose: true,
        duration: 5 * 1000
      })
    },
    // 刷新
    // 删除
    handleDelete(row) {
      this.$confirm('此操作会导致该设备无法进行连接, 请谨慎操作. 是否继续删除【 ' + row.name + ' 】连接信息？', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.listLoading = true
        delMobile(row.id).then((res) => {
          this.listLoading = false
          this.$notify.success({
            type: 'success',
            title: '成功',
            message: '【 ' + row.name + ' 】已删除',
            showClose: true,
            duration: 5 * 1000
          })
          if (this.listSearch.total % 10 === 1) {
            if (this.listSearch.page !== 1) {
              this.listSearch.page = this.listSearch.page - 1
            }
          }
          this.getList()
        })
      }).catch(() => {
        this.$notify.info({
          type: 'info',
          title: '提示',
          message: '已取消删除',
          showClose: true,
          duration: 5 * 1000
        })
      })
    },
    // 删除
    // 状态
    handleStatus(row) {
      statusMobile({ 'id': row.id, 'status': row.status }).then((res) => {
        if (res.data.status === true) {
          this.$notify.success({
            type: 'success',
            title: '已激活',
            message: '【 ' + row.name + ' 】',
            showClose: true,
            duration: 5 * 1000
          })
        } else {
          this.$notify.info({
            type: 'info',
            title: '已锁定',
            message: '【 ' + row.name + ' 】',
            showClose: true,
            duration: 5 * 1000
          })
        }
      })
    },
    // 状态
    // 下载导入模板
    handleDownloadTemplateFile() {
      DownloadTemplateFileMobile().then(res => {
        this.downLoading = true
        console.log(this.url_api + 'media/' + res.data.name)
        window.open(this.url_api + 'media/' + res.data.name)
        this.$notify.success({
          type: 'success',
          title: '成功',
          message: '【' + res.data.name + '】' + res.message,
          showClose: true,
          duration: 5 * 1000
        })
        this.downLoading = false
      })
    },
    // 下载导入模板
    // 导入
    handleUploadDataFile(file) {
      this.downLoading = true
      this.fileReq = new FormData()
      // 把文件传进去
      this.fileReq.append('excel', file.file)
      UploadDataFileMobile(this.fileReq).then(res => {
        if (res.message.error === 0) {
          this.$notify.success({
            type: 'success',
            title: '成功',
            message: '成功: ' + res.message.success + '条',
            showClose: true,
            duration: 5 * 1000
          })
        } else {
          const error_name = res.message.error_name
          const se_num = '成功: ' + res.message.success + '条, 失败: ' + res.message.error + '条, 失败条目: '
          const msg = (
            <div>
              <div> {se_num}</div>
              {
                error_name.map((item) => {
                  return <div>{item.name}: {item.message}</div>
                })
              }
            </div>
          )
          this.$message({
            message: msg,
            center: true
          })
        }
        this.getList()
      })
      this.downLoading = false
    },
    // 导入
    // 导出
    handleDownloadCurrent() {
      this.downLoading = true
      exportMobileCurrent(this.listSearch).then(res => {
        const url = this.url_api + 'media/export/' + res.data.name
        window.open(url)
        this.downLoading = false
        this.$notify.success({
          type: 'success',
          title: '成功',
          message: res.data.name + res.message,
          showClose: true,
          duration: 5 * 1000
        })
      })
    },
    handleDownloadAll() {
      this.downLoading = true
      exportMobileAll().then(res => {
        const url = this.url_api + 'media/export/' + res.data.name
        window.open(url)
        this.downLoading = false
        this.$notify.success({
          type: 'success',
          title: '成功',
          message: res.data.name + res.message,
          showClose: true,
          duration: 5 * 1000
        })
      })
    }
    // 导出
  }
}

</script>

<style scoped>

</style>
